 var brandsChanged = false;
var productsChanged = false;

var car = {};

$(document).ready(function(){
	getBrands();
});

getBrands = function(){
	updateMySelectOptions($("#brands").get(0));
}

/**
 * e.g. if brands Changed, then set car[brands_changed] = true
 * @param element
 * @returns
 */
function updateMyStatus(element){
	car[element.id + "_changed"] = true;
}

isParentChanged = function(title){
	var parentId = getParentIdByTitle(title);
	var result = car[parentId + "_changed"];
	console.log(title + " isParentChanged : " + result);
	return result;
}

getParentIdByTitle = function(title){
	var result = title.replace(/.*_/, '');
	console.log(title + " Parent : " + result);
	return result;
}

isNoParent = function(title){
	var result;
	if(title == null || title == ""){
		result =  true;
	}else{
		result = /my_parent/i.test(title);
	}
	console.log(title + " isNoParent : " + result);
	return result;
}

 resetParentChangeFlag = function(parentId){
	car[parentId + "_changed"] = false;
}

 updateMySelectOptions = function(element, requestUrl, requestFormId){
		if(requestUrl == null || requestUrl == ""){
			requestUrl = "/" + element.id;
		}
		if(requestFormId == null || requestFormId == ""){
			requestFormId = "carPriceRequest";
		}
		updateSelectOptionsByParentMultipleOptionsSelected(element.id, requestUrl, requestFormId);
	}
 
/**
 * The function used to update  Element By Ajax
 * @param elementId: the id of the select item which needs to update its select options. 
 * @param requestUrl
 * @param requestType: post or get, default: post.
 * @param formData
 * @param returnDataType: json or other, default: json.
 * @returns
 */
function updateElementByAjax(elementId, requestUrl, formData, requestType, returnDataType, functionToHandleResponse){
	var element = $("#" + elementId).get(0);
	console.log("elementId: " + elementId);		
	if(requestType == null){
		requestType = "post";
	}	
	if(returnDataType == null){
		returnDataType = "json";
	}	
	$.ajax({
		type: requestType,
		data:  formData, 
		url: requestUrl,
		dataType: returnDataType,
		//contentType: "application/json",
		success: function(response){
			console.log("response: " +  JSON.stringify(response));
			functionToHandleResponse(response, element);
		},
		error: function(error){
			console.log("error: " +  JSON.stringify(error));
			//alert('Failure to connect the Server!');
		},
	});



}

/**
 * The function used to update the select options of the element when its parent is multiple change items0
 * e.g. Brand is prarent of Product. when Brand chose BMW, BENZ, Then Products of BMW, BEN will be chose to be the select options for Product.
 * @param selectItemId: the id of the select item which needs to update its select options. 
 * @param requestUrl
 * @param requestType: post or get, default: post.
 * @param requestFormId
 * @param returnDataType: json or other, default: json.
 * @returns
 */
function updateSelectOptionsByParentMultipleOptionsSelected(selectItemId, requestUrl, requestFormId, requestType, returnDataType){
	var selectItem = $("#" + selectItemId).get(0);
	//if the selectItem has parent, and its parent has not been changed, then return.
	if(! (isNoParent(selectItem.title) || isParentChanged(selectItem.title))){
		return;
	}
	var formData = getFormData(requestFormId, "select", ":visible");
	updateElementByAjax(selectItemId, requestUrl, formData, "post", "json", updateSelectOptions);
	//reset paremt change flag
	if(!isNoParent(selectItem.title)){
		resetParentChangeFlag(getParentIdByTitle(selectItem.title));
	}
}

updateSelectOptions = function(response, selectItem){
	$(selectItem).empty();
	selectItem.add(new Option("--- ALL ---", ""));
	$.each(response, function(index, option){
		console.log(option.id + "," + option.name);
		selectItem.add(new Option(option.name, option.id));
	});
}

function getFormData(requestFormId, findE, filterC){
	var $requestForm = $("#" + requestFormId);	
	if($requestForm != null){
		var formData = $requestForm.find("select").filter(":visible").serializeArray(); //serialize();
	}
	return formData;
}

showPrices = function(requestFormId, tableId){
	var formData = getFormData(requestFormId, "select", ":visible");
	updateElementByAjax(tableId, "prices", formData, "post", "json", updateTable);
}

updateTable = function(response, table){
	var tableId = table.id;
	$('#' + tableId + ' tbody').empty();
	$.each(response, function(index, price){
		var row = "<tr>"; 
		$('#' + tableId + ' thead' + ' tr' + ' th').each(function(){
			//console.log($(this).attr("abbr"));
			//console.log(price[$(this).attr("abbr")]);
			row += "<td>" + price[$(this).attr("abbr")] + "</td>";			
		});
		row + "</tr>";
		$('#' + tableId + ' tbody').append(row);		
	});	
}